<!DOCTYPE html>
<html>
<head>
    <title>{{ page_title }}</title>
	<meta charset="UTF-8">
	<script type="text/javascript" src="/static/js/jquery-1.9.1.js"></script>
	<script type="text/javascript" src="/static/js/dropdown.js"></script>
	<script type="text/javascript" src="/static/js/accordion.js"></script>
	<script type="text/javascript" src="/static/js/dialog.js"></script>
    {% load dajaxice_templatetags %}{% dajaxice_js_import %}
	<script type="text/javascript" src="/static/jquery.dajax.core.js" charset="utf-8"></script>
	<link href="/static/css/modern.css" rel="stylesheet">
	<link href="/static/css/modern-responsive.css" rel="stylesheet">
    <script type="text/javascript">
        function ansFormToggle(ans_id)
        {
            selector="#form_"+ans_id;
            selPost="#post_"+ans_id;
            if($(selector).css("display")=="none")
            {
                $(selPost).css("padding-bottom","52px");
                $(selector).slideDown();
            }
            else
            {
                $(selPost).css("padding-bottom","10px");
                $(selector).slideUp();
            }
        }
    </script>

</head>
<body class="metrouicss">
    <div class="page">
	    <div class="page-header bg-color-blueDark" style="height:70px">
		    <div class="page-header-content">
			    <a href="/" class="back-button white page-back" style="top:20px;left: 10px"></a>
			    <h2 class="fg-color-white" style="top:20px;left:50px">{{ page_title }}</h2>
		    </div>
	    </div>
    </div>

    <div class="page-region" style="padding: 10px;width: 70%">
	    <div class="page-region-content">
        {% for post in posts %}
        <div class="border-color-lighten" style="padding: 10px;padding-bottom: 10px;margin-bottom: 10px;" id="post_{{ post.id }}">
		    <div class="grid" style="margin-bottom: 0">
			    <div class="row bg-color-teal fg-color-white" style="height: 30px;">
	                <div class="span3">
                        <h3 class="fg-color-white" style="padding-left: 5px;">{{ post.author }}</h3>
                    </div>
                    <div class="offset6" style="text-align: right; vertical-align: middle;">
                        <h3 class="fg-color-white" style="padding-right: 5px;">
                            {{ post.post_date }}&nbsp;
                            <a href="#" onclick="ansFormToggle({{ post.id }});return false;">
                                <i class="icon-reply-2 fg-color-white"></i>
                            </a>
                        </h3>
                    </div>
			    </div>
		    </div>
		    <p>{{ post.message }}</p>
            {% for answer in post.answer_set.all %}
		    <blockquote class="place-right" style="background-color: #f3f3f3; padding-bottom: 10px;margin-bottom: 10px;">
                <p class="tertiary-secondary-text">{{ answer.author }},{{ answer.answ_date }}</p>
			    <p>{{ answer.message }}</p>
            </blockquote>
            {% endfor %}
            <div id="form_{{ post.id }}" style="margin-top: 10px;display: none;">
                <form id="hotlineAnswer_{{ post.id }}" method="post">
                    {% csrf_token %}
                    <div class="input-control text">
                        {{ frmAns.author }}
                        <button class="btn-clear"></button>
                    </div>
                    <div class="input-control text">
                        {{ frmAns.tvbv }}
                        <button class="btn-clear"></button>
                    </div>
                    <div class="input-control text">
                        {{ frmAns.message }}
                    </div>
                    <button class="image-button bg-color-blueDark fg-color-white place-right" style="margin-top: 10px;margin-right: 0;">
                        Залишити відповідь<i class="icon-reply bg-color-greenDark"></i>
                    </button>
                </form>
            </div>
	    </div>
        {% endfor %}
        <div id="form" style="margin-top: 10px;">
	        <form id="hotline" method="post">
                {% csrf_token %}
		        <div class="input-control text">
			        {{ frmPosts.author }}
			        <button class="btn-clear"></button>
                </div>
		        <div class="input-control text">
			        {{ frmPosts.tvbv }}
			        <button class="btn-clear"></button>
		        </div>
		        <div class="input-control text">
			        {{ frmPosts.message }}
		        </div>
		        <input type="submit" value="Відправити" class="place-right">
	        </form>
        </div>
        </div>
    </div>
</body>
</html>